<!-- 用户管理 -->
<template>
  <div class="children_content">
    <div class="children_content_flex">
      <div class="left_box">
        <div class="tree_title">
          <div class="title">组织机构</div>
          <Button type="primary" @click="depEdit('add')"
            >创建部门</Button
          >
          <!-- <Icon type="md-refresh" size="20" /> -->
        </div>

        <organ-tree ref="organRef" @selected="treeSelected" />
      </div>
      <div class="right_box">
        <div class="add_btns_box">
          <div class="box_left">
            <div class="title">{{ selectedOrgan.name || '组织机构' }}</div>
          </div>
          <div class="box_right">
            <Space>
              <Button type="primary" @click="userSelect()"
                >添加用户到当前部门</Button
              >
              <Button type="primary">地区设置</Button>
              <Button type="primary" @click="depEdit('edit')">修改部门</Button>
              <Button type="error" @click="depDelete()">删除部门</Button>
              <Button type="error">部门授权</Button>
            </Space>
          </div>
        </div>

        <div class="content_table">
          <vxe-table
            ref="tableRef"
            :data="tableData"
            border="none"
            sync-resize
            size="small"
            stripe
            :min-height="50"
            class="right_table"
            :max-height="tableHeight + 'px'"
            :loading="true"
          >
            <vxe-column title="用户" field="username"> </vxe-column>
            <vxe-column title="姓名" field="uname"> </vxe-column>
            <vxe-column title="电子邮件" field="email"> </vxe-column>
            <vxe-column title="手机" field="mobile"> </vxe-column>
            <vxe-column title="组长" field=""> </vxe-column>
            <vxe-column title="操作" fixed="right" width="160" align="center">
              <template #default="{ row }">
                <div class="table_btns">
                  <text-btn type="custom"
                    >授权组长</text-btn
                  >
                  <text-btn type="del" @click="removeUser(row, rowIndex)"
                    >移除</text-btn
                  >
                </div>
              </template>
            </vxe-column>
          </vxe-table>
          <div class="page_box">
            <Page
              v-model="pageIndex"
              :page-size="pageSize"
              :total="total"
              show-elevator
              show-total
              @on-change="getUserList()"
            />
          </div>
        </div>

        <!-- <TemplateTable/> -->
      </div>
    </div>
  </div>

  <!-- 新增编辑部门数据 -->
  <edit-dep-dialog
    ref="depEditRef"
    v-if="showAddDep"
    @cancel="showAddDep = false"
    @submit="depEditSuccess"
  />
  <!-- 选择用户 -->
  <UserSelect
    ref="userSelectRef"
    v-if="showUserSelect"
    @cancel="showUserSelect = false"
    @submit="userSelectSuccess"
  />
</template>
<script setup>
import {
  ref,
  onMounted,
  getCurrentInstance,
  inject,
  watch,
  nextTick,
} from 'vue';
import { Message } from 'view-ui-plus';

import { userList, organDel, organRemove } from '@/api/modules/department';

import OrganTree from './components/OrganTree.vue';
import EditDepDialog from './components/EditDepDialog.vue';
import UserSelect from './components/UserSelect.vue';

// 屏幕高度
const screenHeight = inject('screenHeight');
// 搜索组件高度
const searchHeight = ref(null);
// 表格高度
const tableHeight = ref(0);
// 监听 screenHeight 的变化
watch(
  screenHeight,
  (newHeight) => {
    tableHeight.value = newHeight - 248;
  },
  { immediate: true }
);

// 是否显示新增
const showAddDep = ref(false);
const showAdd = ref(false);
const showUserSelect = ref(false);

// 当前对象
const { proxy } = getCurrentInstance();

const pageIndex = ref(1);
const pageSize = 20;
const total = ref(0);
// 表单元素对象
const tableRef = ref(null);

// 列表数据
const tableData = ref([]);

// 导出
const exportCsv = () => {
  tableEl.value.exportCsv({
    filename: '用户管理列表',
  });
};
// 部门选中
const selectedOrgan = ref({
  name: '',
  id: undefined,
});
let organId;
const treeSelected = (node) => {
  organId = node.id;
  selectedOrgan.value = node;
  getUserList(true);
};

/**
 * 移除用户
 * @param {
 *  row: 选中行数据
 *  index: 当前数据下标
 * }
 */
const removeUser = (row) => {
  if (!selectedOrgan.value.id) {
    Message.info('请先选择部门');
    return;
  }
  const name = selectedOrgan.value.name;
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: `<p>是否从${name}里移除该用户?</p>`,
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await organRemove({
        data: [{ id: row.id }],
      });
      Message.success('确认移除');
      getUserList();
    },
  });
};

const getUserList = (reset) => {
  if (reset) {
    pageIndex.value = 1;
  }

  userList({
    query: {
      p: pageIndex.value,
      ps: pageSize,
    },
    data: {
      organ: organId || undefined,
    },
  }).then(({ data }) => {
    tableData.value = data.topicList;
    total.value = data.totalElements;
  });
};

// 选择用户加入部门
const userSelectRef = ref(null);
const userSelect = async() => {
  if (!organId) {
    Message.info('请先选择部门');
    return
  };
  showUserSelect.value = true;
  await nextTick();
  console.log(userSelectRef.value)
  userSelectRef.value?.initDialog(organId);
};
const userSelectSuccess = () => {
  showUserSelect.value = false;
  nextTick(() => {
    getUserList();
  });
};

// 新增编辑部门
const depEditRef = ref(null);
const depEdit = (type) => {
  if (type == 'edit' && !selectedOrgan.value.id) {
    Message.info('请先选择部门');
    return
  };
  showAddDep.value = true;
  nextTick(() => {
    depEditRef.value.initDialog(selectedOrgan.value, type);
  });
};
const organRef = ref(null);
const depEditSuccess = () => {
  showAddDep.value = false;
  nextTick(() => {
    organRef.value.getOrganList();
  });
};

// 删除部门
const depDelete = () => {
  if (!selectedOrgan.value.id) {
    Message.info('请先选择部门');
    return
  };
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: '<p>是否删除该部门?</p>',
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await organDel({
        data: {
          id: selectedOrgan.value.id,
        },
      });
      Message.success('确认删除');
      organRef.value.getOrganList();
      tableData.value = [];
      total.value = 0;
      selectedOrgan.value = {}
    },
  });
};



onMounted(() => {
  getUserList();
});
</script>

<style lang="scss" scoped></style>
